<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
	style: {
		navigationStyle: 'custom',
		enablePullDownRefresh: true,
	},
}
</route>
<template>
	<view class="overflow-hidden page">
		<view class="top">
			<view class="title">7号助手</view>
			<view class="sub-title">欢迎使用7号助手</view>

			<view class="menu">
				<text @click="toUrl('/pages/share/index')">{{ appTxtStore?.appTxt?.index?.top_left?.name }}</text>
				<text @click="toUrl('/pages/mine/index')">{{ appTxtStore?.appTxt?.index?.top_right?.name }}</text>
			</view>
		</view>

		<view class="tabs">
			<view
				v-for="(item, index) in platformList"
				:class="`count count${index}`"
				v-show="item && item?.total > 0"
				:key="item.id"
			>
				{{ item?.total }}
			</view>

			<wd-tabs v-model="activeIndex" @change="handleIndexChange" swipeable animated>
				<wd-tab v-for="item in platformList" :title="item.title" :key="item.id">
					<view class="list">
						<wd-status-tip image="content" v-if="item.list.length == 0" tip="没有更多了" />
						<Material v-for="task in item.list" :key="task.id" :task="task"></Material>
					</view>
				</wd-tab>
			</wd-tabs>
		</view>
	</view>
</template>

<script setup>
import Material from '@/components/material.vue'
import { useAppTxtStore } from '@/store/appTxt'
import { http } from '@/utils/http'

defineOptions({
	name: 'Home',
})

const appTxtStore = useAppTxtStore()

const platformList = reactive([
	{ id: 1, title: '', list: [], count: 0, page: 1, pageSize: 10, total: 0 },
	{ id: 2, title: '', list: [], count: 0, page: 1, pageSize: 10, total: 0 },
	{ id: 3, title: '', list: [], count: 0, page: 1, pageSize: 10, total: 0 },
	{ id: 4, title: '', list: [], count: 0, page: 1, pageSize: 10, total: 0 },
])

const activeIndex = ref(0)

const toUrl = (url) => {
	uni.navigateTo({
		url,
	})
}

const handleIndexChange = ({ index }) => {
	console.log('handleIndexChange', index)

	activeIndex.value = index
	if (platformList[activeIndex.value].count == 0) {
		getData()
	}
}

const getData = async () => {
	try {
		let res = await http.get('/Usersd/getTaskList', {
			page: platformList[activeIndex.value].page,
			pageSize: platformList[activeIndex.value].pageSize,
			platform: platformList[activeIndex.value].id,
		})

		if (res.code == 200) {
			if (platformList[activeIndex.value].page == 1) {
				for (let i = 0; i < res.result.platform_list.length; i++) {
					platformList[i].title = res.result.platform_list[i].name
					platformList[i].total = res.result.platform_list[i].total
				}

				platformList[activeIndex.value].list = res.result.list
				platformList[activeIndex.value].count = res.result.count
			} else {
				platformList[activeIndex.value].list = platformList[activeIndex.value].list.concat(res.result.list)
			}
		}
	} finally {
		uni.stopPullDownRefresh()
	}
}

onLoad((option) => {
	if (option.inviteCode) {
		uni.setStorage({
			key: 'inviteCode',
			data: option.inviteCode,
		})
	}
})

onShow(() => {
	getData()
})

onPullDownRefresh(() => {
	platformList[activeIndex.value].page = 1
	getData()
})

onReachBottom(() => {
	if (platformList[activeIndex.value].list.length < platformList[activeIndex.value].count) {
		platformList[activeIndex.value].page = platformList[activeIndex.value].page + 1
		getData()
	} else {
		uni.showToast({
			title: '没有更多了',
			duration: 2000,
			icon: 'none',
		})
	}
})
</script>

<style lang="scss" scoped>
:deep(.wd-tabs__nav) {
	background-color: #f2f2f2 !important;
}

:deep(.wd-tabs__line) {
	background-color: #cc302d !important;
}

:deep(.is-active) {
	color: #cc302d !important;
}

.page {
	padding-top: var(--status-bar-height);
	background-image: url('https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/mine_bk.png');
	background-size: 750rpx 500rpx;
	background-repeat: no-repeat;

	.top {
		width: 750rpx;
		height: 400rpx;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: center;

		.title {
			font-weight: 800;

			font-size: 32rpx;
			line-height: 60rpx;

			color: #ffedd5;
			text-shadow: 0 0 3rpx #333;

			margin-top: 40rpx;
		}

		.sub-title {
			font-weight: 500;

			font-size: 28rpx;
			line-height: 60rpx;

			color: #ffedd5;
			text-shadow: 0 0 3rpx #333;
		}

		.join-num {
			width: 710rpx;
			height: 80rpx;
			background: #cc302d;
			border-radius: 10rpx;

			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: center;
			color: #ffedd5;

			.num {
				display: inline-block;

				width: 30rpx;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				background: #ffedd5;
				border-radius: 3rpx;
				color: #cc302d;
				margin: 0 3rpx;
			}
		}

		.menu {
			width: 100%;
			height: 60rpx;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-evenly;
			align-items: center;
			color: #ffedd5;
			font-size: 24rpx;

			text {
				display: inline-block;
				width: 200rpx;
				text-align: center;
			}
		}
	}

	// 菜单
	.tabs {
		width: 750rpx;
		min-height: calc(100vh - 524rpx);
		background-color: #f2f2f2;
		border-radius: 30rpx;

		padding-top: 30rpx;
		position: relative;

		.count {
			min-width: 30rpx;
			height: 30rpx;
			border-radius: 20rpx;
			background-color: #cc302d;
			color: #fff;
			line-height: 30rpx;
			text-align: center;
			font-size: 24rpx;

			position: absolute;
			top: 40rpx;
			z-index: 100;
		}

		.count0 {
			left: 125rpx;
		}

		.count1 {
			left: 325rpx;
		}

		.count2 {
			right: 225rpx;
		}

		.count3 {
			right: 25rpx;
		}

		.list {
			width: 750rpx;
			display: flex;
			flex-flow: column nowrap;
			justify-content: flex-start;
			align-items: center;

			gap: 24rpx;
			padding-top: 24rpx;
			padding-bottom: 24rpx;

			background-color: #f2f2f2;
		}
	}
}
</style>
